<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>测试html5shiv对IE的兼容性</title>
	<style type="text/css">
		section {width:500px; margin:auto;}
		article {background:#F2F2F2; padding:20px; margin-bottom:20px;}
		header {background:#EEE; padding:10px; font-size:30px; margin-bottom:10px;}
		p {background:#FFF; padding:10px;}
		article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
	</style>
	<!--[if lte IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>
	<section>
		<article>
			<header>测试HTML5</header>
			<p>这是用来测试的内容</p>
		</article>
		<article>
			<header>测试HTML5</header>
			<p>这是用来测试的内容</p>
		</article>
		<article>
			<header>测试HTML5</header>
			<p>这是用来测试的内容</p>
		</article>
	</section>
	<footer></footer>
	<form action="" method="post">
	<input type="email" placeholder="Enter your email address." />
	<input type="url" />
	<input type="number" />
	<input type="submit" />
	</form>
<canvas id="myconvas" width="300" height="200" draggable="ture" contenteditable="ture">Your browser cannot support HTML5 canvas.</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myconvas");
var ctx = canvas.getContext("2d"); /* canvas初始化是空白，使用脚本画图需要先渲染上下文，通过getContext方法获取。 */
/* if (canvas.getContext) {} 通过判断getContext是否存在即可检查浏览器是否支持canvas */
/*
绘制矩形的三个函数
fillRect(x,y,width,height)  用于设置矩形的XY轴以及宽高
strokeRect(x,y,width,height)  用于绘制边框
clearRect(x,y,width,height)  用于在现有矩形上清除出一片白色空间
绘制路径
beginPath()  创建一个路径，在内存里，路径是以一组子路径（直线，弧线等）的形式储存的，它们共同构成一个图形。每次调用 beginPath，子路径组都会被重置，然后可以绘制新的图形。
closePath()  它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭或者只有一个点，它会什么都不做。这一步不是必须的。
stroke()  绘制图形的边框
fill()  填充出一个实心图形，当调用 fill 时，开放的路径会自动闭合，而无须调用 closePath
moveTo(x,y)   是一个十分有用的方法，虽然并不能用它来画什么，但却是绘制路径的实用方法的一部分。你可以把它想象成是把笔提起，并从一个点移动到另一个点的过程。
arc(x, y, radius, startAngle, endAngle, anticlockwise)  方法接受五个参数：x，y 是圆心坐标，radius 是半径，startAngle 和 endAngle 分别是起末弧度（以 x 轴为基准），anticlockwise 为 true 表示逆时针，反之顺时针。
quadraticCurveTo(cp1x,cp1y,x,y) 二次方曲线，cp1x,cp1y是第一个控制点的坐标，x,终点坐标
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 贝塞尔曲线
*/
ctx.fillStyle='rgb(255,0,0)';
ctx.fillRect(0,0,100,100);
ctx.clearRect(10,10,50,50);
ctx.strokeRect(0,0,100,100);

ctx.fillStyle='rgba(0,255,0,0.5)';
ctx.fillRect(30,30,100,100);

ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fillStyle='#000';
ctx.fill();

ctx.lineTo(50,80);
ctx.lineTo(50,40);
ctx.fill();
</script>

<canvas id="smile" width="250" height="250">Hey guys, guess it's time for you to upgrade your browser!</canvas>
<script type="text/javascript">
	var smile = document.getElementById("smile"); //初始化图形
	if (smile.getContext) { //检查浏览器是否支持canvas
		var sm = smile.getContext("2d");
	} else {
		smile.innerHTML="Hey guys, guess it's time for you to upgrade your browser!";
	}
	//开始绘图
	//绘制脸部轮廓
	sm.beginPath();
	sm.arc(125,125,100,0,Math.PI*2,true);
	sm.moveTo(0,200);
	sm.closePath();
	sm.stroke();
	//绘制左眼外廓
	sm.beginPath();
	sm.arc(80,90,20,0,Math.PI*2,true);
	sm.moveTo(0,200);
	sm.closePath();
	sm.stroke();
	//绘制右眼外廓
	sm.beginPath();
	sm.arc(170,90,20,0,Math.PI*2,true);
	sm.moveTo(0,200);
	sm.closePath();
	sm.stroke();
	//绘制左眼眼珠
	sm.beginPath();
	sm.arc(80,90,12,0,Math.PI*2,true);
	sm.moveTo(0,200);
	sm.fill();
	//绘制右眼眼珠
	sm.beginPath();
	sm.arc(170,90,12,0,Math.PI*2,true);
	sm.moveTo(0,200);
	sm.fill();
	//绘制觜
	sm.beginPath();
	sm.arc(125,140,50,Math.PI,0,true);
	sm.moveTo(0,200);
	sm.closePath();
	sm.stroke();
	//绘制左眼光1
	sm.beginPath();
	sm.fillStyle='#FFF';
	sm.arc(76,88,7,0,Math.PI*2,true);
	sm.moveTo(0,200);
	sm.fill();
	//绘制左眼光2
	sm.beginPath();
	sm.fillStyle='#FFF';
	sm.arc(85,95,4,0,Math.PI*2,true);
	sm.moveTo(0,200);
	sm.fill();
	//绘制右眼光1
	sm.beginPath();
	sm.fillStyle='#FFF';
	sm.arc(174,88,7,0,Math.PI*2,true);
	sm.moveTo(0,200);
	sm.fill();
	//绘制右眼光2
	sm.beginPath();
	sm.fillStyle='#FFF';
	sm.arc(165,95,4,0,Math.PI*2,true);
	sm.moveTo(0,200);
	sm.fill();
	//绘制左脸红晕
	sm.beginPath();
	sm.fillStyle='rgba(255,0,0,0.1)';
	sm.arc(50,125,15,0,Math.PI*2,true);
	sm.moveTo(0,200);
	sm.fill();
	//绘制右脸红晕
	sm.beginPath();
	sm.fillStyle='rgba(255,0,0,0.1)';
	sm.arc(200,125,15,0,Math.PI*2,true);
	sm.moveTo(0,200);
	sm.fill();
	
	sm.beginPath();
	sm.moveTo(0,200);
	sm.quadraticCurveTo(30,50,50,50);
	sm.stroke();
</script>
</body>
</html>